<!-- 自定义表单 -->
<template>
	<view class="my-form" :style="{ '--color': color, '--colors': colors }">
		<view v-for="(form, index_f) in orderData" :key="index_f" v-if="orderData.length > 0">
			<!-- 表单详情介绍 -->
			<view class="orderInfo" v-if="form.info && showInfo == 'true'">
				<view class="topMsg" v-if="form.info.show_info == 1">
					<image v-if="form.info.wzn_act_img" :src="$imgUrls(form.info.wzn_act_img)" mode="widthFix"></image>
					<view class="infoContent">
						<view class="infoName">{{ form.info.order_name }}</view>
						<view class="info_item">
							{{ form.info.order_title }}时间：{{ form.info.order_starttime }} ~
							{{ form.info.order_endtime }}
						</view>
						<view class="info_item">联系电话：{{ form.info.order_tel }}</view>
						<view class="info_item">地址：{{ form.info.order_address }}</view>
						<!-- <view class="info_s">{{form.info.order_title}}说明：</view> -->
					</view>
				</view>
				<mp-html :content="form.info.order_content" lazy-load scroll-table selectable use-anchor show-with-animation />
			</view>
			<view class="dowload_file_box flex-box align-center" v-if="form.info.attachment_url">
				<view class="dowload_file" @click="openFile(form.info.attachment_url)">
					<text
						class="thmeBg"
						:style="{
							'--color': color
						}"
					>
						预览{{ form.info.attachment_name }}
					</text>
				</view>
				<view class="dowload_file" @click="copy_text(baseUrl + form.info.attachment_url)">
					<text
						class="thmeBg"
						:style="{
							'--color': color
						}"
					>
						复制附件地址
					</text>
				</view>
			</view>
			<view class="photoes" v-if="form.info.imgs">
				<template v-if="form.info.imgs.length == 1">
					<image
						class="img_1"
						@click="previewImage(g, form.info.imgs)"
						:src="$imgUrls(img)"
						mode="aspectFill"
						:show-menu-by-longpress="true"
						v-for="(img, g) in form.info.imgs"
						:key="g"
						v-if="g == 0"
					></image>
				</template>
				<template v-else>
					<image
						class="img_2"
						@click="previewImage(g, form.info.imgs)"
						:src="$imgUrls(img)"
						mode="aspectFill"
						:show-menu-by-longpress="true"
						v-for="(img, g) in form.info.imgs"
						:key="g"
					></image>
				</template>
			</view>
			<!-- 表单-->
			<view class="reserve-box">
				<view class="reserve white">
					<view class="reserve-title">{{ form.info.order_name }}</view>
					<view class="form">
						<block v-for="(ord, index) in form.data" :key="index">
							<!-- 1、单行文本框 -->
							<view class="text_input align-center" v-if="ord.config_type == 1 && ord.config_state == 1 && !ord.disable">
								<text class="Required" v-if="ord.config_must == 1 || ord.config_name == '用户姓名' || ord.config_name == '联系电话'">*</text>
								<text class="isKey">{{ ord.config_name }}：</text>
								<input
									:placeholder="ord.place ? ord.place : '请输入' + ord.config_name"
									v-model="ord.config_content"
									class="form-ipt"
									type="text"
									placeholder-class="pla"
								/>
							</view>
							<!--2、选择日期  3-->
							<view class="drop_select" v-if="ord.config_type == 3 && ord.config_state == 1 && !ord.disable">
								<timepicker showType="date" @btnConfirm="btnConfirm1" :isAll="false" :index1="index" :index2="index_f" @btnCancel="btnCancel">
									<view class="picker">
										<text class="Required" v-if="ord.config_must == 1">*</text>
										<text class="isKey">{{ ord.config_name }}：</text>
										<text class="flex" :class="{ isKey: ord.config_content }">{{ ord.config_content ? ord.config_content : ord.config_pla }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</timepicker>
							</view>

							<!-- 3、验证码 -->
							<view class="Veri_Code align-center" v-if="form.info.verification == 1 && ord.config_name == '联系电话'">
								<view class="inputBox flex-box text_input">
									<text class="Required">*</text>
									<input placeholder="请输入验证码：" type="number" v-model="form.info.verCode" />
								</view>
								<button class="sendCode thmeBg" :style="{ '--color': color }" @click="verifCode2(index_f, form.info.order_id)" :disabled="form.info.btnDisabled">
									{{ form.info.btnTxt }}
								</button>
							</view>
							<!-- 4、 选择时间-->
							<view class="drop_select" v-if="ord.config_type == 7 && ord.config_state == 1 && !ord.disable">
								<timepicker
									showType="minuteToSecond"
									@btnConfirm="btnConfirm"
									:isAll="false"
									:index1="index"
									:index2="index_f"
									id="mypicker"
									@btnCancel="btnCancel"
									ref="mypicker"
								>
									<view class="picker">
										<text class="Required" v-if="ord.config_must == 1">*</text>
										<text class="isKey">{{ ord.config_name }}：</text>
										<text class="flex" :class="{ isKey: ord.config_content }">{{ ord.config_content ? ord.config_content : time }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</timepicker>
							</view>
							<!-- 5、选择地址 -->
							<view class="drop_select" v-if="ord.config_type == 6 && ord.config_state == 1 && !ord.disable">
								<view class="picker" @click="showAddPicker(index, index_f)">
									<text class="Required" v-if="ord.config_must == 1">*</text>
									<text class="isKey">{{ ord.config_name }}：</text>
									<text class="flex" :class="{ isKey: ord.config_content }">{{ ord.config_content ? ord.config_content : ord.pickered }}</text>
									<text class="icon-xiasanjiaoxing iconfont"></text>
								</view>
							</view>
							<!-- 6、下拉框 -->
							<view class="drop_select" v-if="ord.config_type == 2 && ord.config_state == 1 && !ord.disable" @click="showSelect(index, index_f)">
								<picker mode="selector" :range="ord.options" :data-indexf="index_f" :data-index="index" @change="selectorChange" style="width: 100%">
									<view class="picker">
										<text class="Required" v-if="ord.config_must == 1">*</text>
										<text class="isKey">{{ ord.config_name }}：</text>
										<text class="flex" :class="{ isKey: ord.config_content }">{{ ord.config_content ? ord.config_content : '请选择' + ord.config_name }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</picker>
							</view>
							<!-- 7、复选框 -->
							<view class="mulitSelect" v-if="ord.config_type == 5 && ord.config_state == 1 && !ord.disable">
								<view>
									<text class="Required" v-if="ord.config_must == 1">*</text>
									<text class="isKey">{{ ord.config_name }}：</text>
								</view>
								<view class="checkList flex">
									<block v-for="(check, index_check) in ord.checkList" :key="index_check">
										<view class="checkItem" @click="checkClick(index, index_f, index_check, check.checked, check.name)">
											<view class="checkIcon thmeBorder" :style="{ '--color': color }" :class="{ thmeBg: check.checked }">
												<text class="icon-xuanzhong iconfont"></text>
											</view>
											<text class="name">{{ check.name }}</text>
										</view>
									</block>
								</view>
							</view>
							<!-- 8、单选框 -->
							<view class="singleSelect" v-if="ord.config_type == 9 && ord.config_state == 1 && !ord.disable">
								<text class="Required" v-if="ord.config_must == 1">*</text>
								<text class="isKey">{{ ord.config_name }}：</text>
								<view class="checkList flex">
									<block v-for="(check, index_check) in ord.checkList" :key="index_check">
										<view class="checkItem" @click="checkClick1(index, index_f, index_check, check)">
											<view class="checkIcon_" :class="{ thmeBorder: ord.config_content == check }" :style="{ '--color': color }">
												<text :class="ord.config_content == check ? 'thmeBg' : 'grayBg'" :style="{ '--color': color }"></text>
											</view>
											<text class="name">{{ check }}</text>
										</view>
									</block>
								</view>
							</view>
							<!-- 9、上传图片 -->
							<view class="uploadImg" v-if="ord.config_type == 8 && ord.config_state == 1 && !ord.disable">
								<text class="Required" v-if="ord.config_must == 1">*</text>
								<text class="isKey">{{ ord.config_name }}：</text>
								<view class="phone-box flex-box">
									<view class="upBox relative" style="border: 1px solid #dcdada" v-for="(img, i) in ord.imgs" :key="i">
										<view class="delImg thmeBg" @click="del(index, index_f, i)" :style="{ '--color': color }">
											<image :src="staticUrl + '/images/jh_up/delImg.png'"></image>
										</view>
										<image class="upIcon" :src="$imgUrls(img)" mode="aspectFit"></image>
									</view>
									<view class="upBox" v-if="ord.imgEn">
										<image
											class="upIcon"
											:src="staticUrl + '/images/jh_up/addImg.png'"
											@click="selectImage(index, index_f, ord.limit)"
											mode="aspectFill"
										></image>
									</view>
								</view>
							</view>
							<!-- 10、文本域 -->
							<view class="areaBox color" v-if="ord.config_type == 4 && ord.config_state == 1 && !ord.disable">
								<text class="Required" v-if="ord.config_must == 1">*</text>
								<text class="isKey">{{ ord.config_name }}：</text>
								<textarea
									class="textArea"
									v-model="ord.config_content"
									@input="areaBlur($event, index, index_f)"
									:placeholder="ord.plac ? ord.plac : '请输入内容...'"
								/>
							</view>

							<!-- 11、 选择时间 (可配置类型)-->
							<view class="drop_select" v-if="ord.config_type == 10 && ord.config_state == 1 && !ord.disable">
								<timepicker
									:showType="ord.dateTimeType"
									@btnConfirm="btnConfirm2"
									:isAll="false"
									:index1="index"
									:index2="index_f"
									id="mypicker"
									@btnCancel="btnCancel"
									ref="mypicker"
									style="width: 100%; height: 100%"
								>
									<view class="picker">
										<text class="Required" v-if="ord.config_must == 1">*</text>
										<text class="isKey">{{ ord.config_name }}：</text>
										<text class="flex" :class="{ isKey: ord.config_content }">{{ ord.config_content ? ord.config_content : '请选择' + ord.config_name }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</timepicker>
							</view>

							<!-- 16、人数 -->
							<view class="text_input align-center" v-if="ord.config_type == 16 && ord.config_state == 1 && !ord.disable">
								<text class="Required" v-if="ord.config_must == 1">*</text>
								<text class="isKey">{{ ord.config_name }}：</text>
								<input
									:placeholder="ord.place ? ord.place : '请输入' + ord.config_name"
									v-model="ord.config_content"
									class="form-ipt"
									type="number"
									placeholder-class="pla"
									@input="getNum"
								/>
							</view>
						</block>
						<!-- <text class="wrong">{{form.info.wrongTxt}}</text> -->
						<button class="reserveNow" form-type="submit" v-if="form.info.order_id == '2147' && (form.station == 0 || !form.station)">
							暂无{{ form.info.order_title ? form.info.order_title : '申请' }}权限
						</button>
						<button
							class="reserveNow thmeBg"
							v-if="form.info.price == 0"
							:style="{ '--color': color }"
							form-type="submit"
							@click="reserveNow(index_f, form.info.order_id, form)"
						>
							{{ form.info.order_title ? '立即' + form.info.order_title : '立即提交' }}
						</button>
						<view class="row j-sb nowBtn bgcolor" v-if="form.info.price != 0" @click="reserveNow(index_f, form.info.order_id, form)">
							<view class="d-flex white a-center j-centert bgcolors nowLeft">
								<text class="h6">￥</text>
								<text class="size32">{{ form.info.price * num }}</text>
							</view>
							<view class="d-flex white size32 a-center j-centert bgcolor nowRigth">
								{{ form.info.order_title ? '立即' + form.info.order_title : '立即提交' }}
							</view>
						</view>
					</view>
					<view class="color_66 text-center m-top20" @click="toRecord" v-if="!form.sncode_id">我的{{ form.info.order_title }}</view>
				</view>
			</view>
		</view>
		<view class="mask success-img-box" v-if="showSuccess" :style="{ 'padding-top': navHeight + System.statusBarHeight + 'px' }">
			<image @click="toStation" class="success-img" :src="staticUrl + '/images/station/be_station.png'" mode="widthFix"></image>
		</view>
		<!-- 选择地址组件（不能放在循环里面） -->
		<mpvue-city-picker :shixian2="shixian2" ref="mpvueCityPicker_" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" @onCancel="onCancel"></mpvue-city-picker>

		<showModel @cancelFunc="showModal = false" v-if="showModal" type="2"></showModel>
		<empty v-if="noData" type="1" cat="4" :msg="msg"></empty>
		<!-- 	<showModel @cancelFunc='showModal1=false' v-if='showModal1' type='99' title='提交成功!' :msg='modelTitle'
		 @certain='toUrl("/pages/reserve/myRreserve")' :btn1='btn1' :btn2='btn2'></showModel> -->
		<showModel @cancelFunc="showModal1 = false" v-if="showModal1" type="99" title="提交成功!" :msg="modelTitle" @certain="certainBtn" :btn1="btn1" :btn2="btn2"></showModel>
		<view class="mask flexac f-column" @click="success_img = ''" v-if="success_img">
			<image class="viewbox5" :src="$imgUrls(success_img)" mode="aspectFit" style="height: 890rpx" @click.stop></image>
			<text class="iconfont icon-guanbi size60" @click="success_img = ''"></text>
		</view>
	</view>
</template>
<script>
import { mapState } from 'vuex';
var date = new Date(),
	that,
	timer = null;
var mon = date.getMonth() + 1;
if (mon < 10) mon = '0' + mon;
var day = date.getDate();
if (day < 10) day = '0' + day;
var today = date.getFullYear() + '-' + mon + '-' + day;
var H = date.getHours();
var m = date.getMinutes();
if (H < 10) H = '0' + H;
if (m < 10) m = '0' + m;
var time = H + ':' + m; // 当前时间
import mpvueCityPicker from './mpvue-citypicker/mpvueCityPicker.vue';
import timepicker from './time-picker.vue';
import '@/js_sdk/ican_H5Api/ican-H5Api';
export default {
	props: ['ids', 'info', 'barTitle'], //ids:表单id列表,有可能同时出现多个表单的情况  info:是否显示表单介绍  barTitle:是否修改页面标题 1修改
	components: {
		mpvueCityPicker,
		timepicker
	},
	data() {
		return {
			colors: getApp().globalData.color_aid,

			staticUrl: this.staticUrl,
			baseUrl: this.baseUrl,
			showModal: false,
			latitude: 0, //纬度
			longitude: 0, //经度
			inputValue: today,
			shixian: false,
			year: date.getFullYear(),
			month: mon,
			day: day,
			indexs: [],
			today: today, // 出生日期默认值
			orderData: [], // 表单结构
			time: time, // 当前时间
			minute: 3,
			hour: 3,
			shixian1: false,
			cityPickerValueDefault: [0, 0, 1], // 默认选择地址
			shixian2: false,
			loadingNow: false, // 图片正在上传
			list: this.ids,
			showInfo: this.info, // 是否显示表单详情
			noData: false,
			msg: '',
			showSuccess: false,
			success_img: '',
			showModal1: false,
			modelTitle: '您已成功提交，请耐心等待审核结果！',
			btn1: '确定',
			btn2: '前往查看',
			jump_pay: '',
			sncode_id: '',
			palyInfo: {}, // 获取支付信息
			num: 1
		};
	},
	created() {
		let that = this;
		that.getList();
	},
	methods: {
		getNum(e) {
			this.num = e.detail.value;
		},
		toRecord() {
			if (!this.vid) return (this.showModal = true);
			const order_id = this.orderData[0].info.order_id;
			this.toUrl(`/pages/reserve/myRreserve?order_id=${order_id}`);
		},
		certainBtn() {
			let that = this;
			if (that.jump_pay == 2) {
				that.showModal1 = false;
				if (that.palyInfo.extraData) {
					wx.openEmbeddedMiniProgram({
						appId: that.palyInfo.appId,
						extraData: that.palyInfo.extraData
					});
				} else {
					uni.getProvider({
						service: 'payment',
						success(resp) {
							uni.requestPayment({
								provider: resp.provider[0],
								orderInfo: {
									sncode_id: that.sncode_id
								},
								timeStamp: that.palyInfo.timeStamp,
								nonceStr: that.palyInfo.nonceStr,
								package: that.palyInfo.package,
								signType: that.palyInfo.signType,
								paySign: that.palyInfo.paySign,
								success(res) {
									uni.showToast({
										title: '支付成功',
										mask: true,
										icon: 'none',
										success() {
											setTimeout(() => {
												uni.navigateBack({
													delta: 1
												});
											}, 800);
										}
									});
								},
								fail(err) {
									uni.navigateBack({
										delta: 1
									});
								}
							});
						}
					});
				}
			} else {
				uni.navigateTo({
					url: '/pages/reserve/myRreserve'
				});
			}
		},

		toStation() {
			let that = this;
			that.showSuccess = false;
			that.toUrl('/moneyPage/station/index');
		},
		openFile(url) {
			let that = this;
			// #ifdef H5
			window.location.href = that.baseUrl + url;
			// #endif
			// #ifndef H5
			uni.downloadFile({
				url: that.baseUrl + url,
				success: function (res) {
					var filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						success: function (res) {
							console.log('打开文档成功');
						}
					});
				}
			});
			// #endif
		},
		copy_text: function (copyData) {
			uni.setClipboardData({
				data: copyData,
				success: function () {
					uni.showToast({
						title: '复制成功！',
						icon: 'success'
					});
				}
			});
		},
		getList() {
			this.list.forEach((item, index) => {
				this.getFormStr(item.order_id, item.sncode_id);
			});
		},
		btnConfirm(e) {
			var indexf = e.indexf;
			var index = e.index;
			this.time = e.key;
			this.orderData[indexf].data[index].config_content = e.key;
		},
		btnConfirm1(e) {
			var indexf = e.indexf;
			var index = e.index;
			this.today = e.key;
			this.orderData[indexf].data[index].config_content = e.key;
		},
		btnConfirm2(e) {
			var indexf = e.indexf;
			var index = e.index;
			this.orderData[indexf].data[index].config_content = e.key;
		},
		btnCancel(e) {
			console.log(e);
		},
		dateChange(e) {
			var DATE = e.target.value;
			this.orderData[index_f].data[index].config_content = DATE;
		},
		timeChange(e) {
			var index = e.target.dataset.index;
			var index_f = e.target.dataset.indexf;
			var TIME = e.target.value;
			this.orderData[index_f].data[index].config_content = TIME;
		},
		showPicker: function (sx, index, index_f) {
			// 记录当前表单序列和当前表单项系列
			this.shixian = sx;
			this.indexs = [index, index_f];
		},
		showPicker1: function (sx, index, index_f) {
			this.shixian1 = sx;
			this.indexs = [index, index_f];
		},
		quxiaobutton: function () {
			this.shixian = false;
		},
		quxiaobutton1: function () {
			this.shixian1 = false;
		},
		quedingbutton: function (y, m, d) {
			this.shixian = false;
			this.inputValue = y + '-' + m + '-' + d;
			this.year = y;
			this.month = m;
			this.day = d;
			this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = this.inputValue;
		},
		quedingbutton1: function (h, m) {
			this.shixian1 = false;
			this.hour = h;
			this.minute = m;
			if (h < 9) h = '0' + h;
			if (m < 9) m = '0' + m;
			this.time = h + ':' + m;
			this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = this.time;
		},
		bindDateChange: function (event) {
			this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = event.target.value;
		},
		// 三级联动选择
		showAddPicker(index, index_f) {
			this.shixian2 = true;
			this.indexs = [index, index_f];
		},
		onCancel() {
			this.shixian2 = false;
		},
		onConfirm(e) {
			this.shixian2 = false;
			var add = e.label.replace(/-/g, '');
			this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = add;
		},
		// 下拉框
		showSelect(index, index_f) {
			//下拉框显示
			this.orderData[index_f].data[index].showSelect_ = true;
			this.indexs = [index, index_f];
		},
		chooseSel(index, index_f, option) {
			//下拉框选择
			this.orderData[index_f].data[index].showSelect_ = false;
			if (option) {
				this.orderData[index_f].data[index].config_content = option;
			}
		},
		selectorChange(e) {
			var index_f = e.target.dataset.indexf;
			var index = e.target.dataset.index;
			var selector = e.target.value;
			this.orderData[index_f].data[index].config_content = this.orderData[index_f].data[index].options[selector];
		},
		// 复选框
		checkClick(index, index_f, index_check, checked, name) {
			// 复选框选择 2020.01.09 update
			var that = this;
			var chklist = that.orderData[index_f].data[index];
			if (chklist.config_content && typeof chklist.config_content != 'object') {
				chklist.config_content = chklist.config_content.split(',');
			}
			if (chklist.config_content == '') {
				chklist.config_content = [];
			}
			that.orderData[index_f].data[index].checkList[index_check].checked = !checked;
			if (checked) {
				// 取消选择
				chklist.config_content.forEach((chk, index_c) => {
					if (chk == name) {
						that.orderData[index_f].data[index].config_content.splice(index_c, 1);
					}
				});
			} else {
				// 新增选择
				that.orderData[index_f].data[index].config_content.splice(index_check, 0, name);
			}
		},
		//单选
		checkClick1(index, index_f, index_check, name) {
			//单选
			this.orderData[index_f].data[index].config_content = name;
		},
		// 文本域
		areaBlur(e, index, index_f) {
			this.orderData[index_f].data[index].config_content = e.detail.value;
		},
		// 上传图片
		//选择图片
		selectImage(index, index_f, limit) {
			var that = this;
			uni.chooseImage({
				count: limit,
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'],
				success: (res) => {
					uni.showLoading({
						title: '图片上传中'
					});
					that.loadingNow = true; // 图片正在上传
					res.tempFilePaths.forEach((tempFilePath, tempIndex) => {
						that.$common.uploadFile('/zzjApp/uploade?bid=' + that.bid, tempFilePath).then((res2) => {
							var data = res2;
							if (typeof res2 == 'string') {
								data = JSON.parse(data);
							}
							if (data.errcode == 100) {
								var imgItem;
								imgItem = data.url;
								imgItem = imgItem.substring(22, imgItem.length);
								if (that.orderData[index_f].data[index].imgs.length < limit) {
									that.orderData[index_f].data[index].imgs.push(imgItem);
								}
								if (that.orderData[index_f].data[index].imgs.length >= limit) {
									that.orderData[index_f].data[index].imgEn = false;
								}
								that.orderData = [].concat(that.orderData);
							} else {
								uni.showToast({
									icon: 'none',
									title: data.msg + '!',
									duration: 2000
								});
							}
							uni.hideLoading();
							that.loadingNow = false;
						});
					});
				}
			});
		},
		del(index, index_f, i) {
			// 删除图片
			this.orderData[index_f].data[index].imgs.splice(i, 1);

			this.orderData[index_f].data[index].imgEn = true;
		},
		getFormStr(ordId, sncodeId = '') {
			// 获取自定义表单结构
			let that = this;
			that.$http
				.get({
					url: '/SRA_CustomerForm/customForm',
					data: {
						VeriCode: this.bid,
						ordId: ordId,
						sncodeId
					}
				})
				.then((res) => {
					if (res.code == 100) {
						var obj = {};

						if (res.data.config) {
							obj.data = res.data.config;
							obj.data.forEach((item, index) => {
								if (item.config_type == 1 || item.config_type == 16) {
									// 文本框
									if (item.config_content) {
										item.place = item.config_content;
										item.config_content = '';
									}
								}
								if (item.config_type == 2) {
									// 下拉框
									item.showSelect_ = false;
									item.options = item.config_content.split('|');
									item.config_content = '';
								}
								if (item.config_type == 6) {
									// 选择地址
									item.pickered = item.config_content ? item.config_content : '请选择区县';
									item.config_content = '';
								}
								if (item.config_type == 7 && !item.config_content) {
									// 选择时间
									item.config_content = that.time;
								}
								if (item.config_type == 3) {
									// 选择日期
									// item.config_content = that.inputValue;
									item.config_pla = '请选择';
									if (item.config_content) {
										item.config_pla = item.config_content;
										item.config_content = '';
									}
								}
								if (item.config_type == 4 && item.config_content) {
									// 下拉框
									item.plac = item.config_content;
									item.config_content = '';
								}
								if (item.config_type == 8) {
									// 上传图片
									item.config_content = '';
									item.imgs = [];
									item.imgEn = true;
									item.limit = item.limit ? parseInt(item.limit) : 1;
								}
								if (item.config_type == 5 && item.config_content) {
									// 复选框
									item.checkList = item.config_content.split('|');
									item.checkList.forEach((check, index_) => {
										var check_ = {
											checked: false,
											name: check
										};
										item.config_content = [];
										item.checkList[index_] = check_;
									});
								}
								if (item.config_type == 9 && item.config_content) {
									// 单选框
									item.checkList = item.config_content.split('|');
									// item.config_content = item.checkList[0];
								}
							});
						}
						var userInfo = res.data.userInfo;
						if (userInfo) {
							obj.data[0].config_content = userInfo.v_name;
							obj.data[1].config_content = userInfo.v_tel;
						}
						obj.station = res.data.station;
						if (res.data.ordInfo.order_content) {
							res.data.ordInfo.order_content = that.$common.richTxt(res.data.ordInfo.order_content).html;
						}
						obj.info = res.data.ordInfo;
						if (res.data.ordInfo.order_name) {
							that.$emit('title', res.data.ordInfo.order_name);
						}
						if (res.data.ordInfo.share_img) {
							that.$emit('shareImg', res.data.ordInfo.share_img);
						}
						if (res.data.ordInfo.imgs) {
							obj.info.imgs = obj.info.imgs.split(',');
						}
						obj.info.verCode = '';
						// obj.info.wrongTxt = '';
						obj.info.btnTxt = '发送验证码';
						obj.info.btnDisabled = false;
						that.orderData.push(obj);
						console.log(that.orderData, 'that.orderData');
						if (that.barTitle == 1) {
							uni.setNavigationBarTitle({
								title: obj.info.order_name ? obj.info.order_name : '信息提交'
							});
						}
						that.v++;

						// 补充表单
						if (res.data.sncode_id) {
							obj.sncode_id = res.data.sncode_id;
							obj.data.forEach((item) => {
								if (item.value) item.config_content = item.value;
							});
						}
					} else {
						that.noData = true;
						that.msg = res.data;
					}
				});
		},
		verifCode2: function (index, orderId) {
			// 发送验证码
			let that = this;
			var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 手机号正则检验
			var phoneNumber = that.orderData[index].data[1].config_content; // 手机号
			if (phoneNumber == '') {
				uni.showToast({
					title: '联系电话不能为空！',
					icon: 'none'
				});
				return false;
			}
			if (!phoneReg.test(phoneNumber) && phoneNumber != '') {
				uni.showToast({
					title: '手机号输入有误！',
					icon: 'none'
				});
				return false;
			}
			if (that.orderData[index].info.btnDisabled) return;
			that.$http
				.post({
					url: '/SRA_CustomerForm/verification_code',
					data: {
						ordId: orderId,
						phone: phoneNumber
					}
				})
				.then((res) => {
					if (res.code == 1000) {
						// 提交成功
						var cutdown = 60;
						timer = setInterval(function () {
							if (cutdown > 0) {
								cutdown--;
								that.orderData[index].info.btnTxt = '重新发送(' + cutdown + ')';
								that.orderData[index].info.btnDisabled = true;
							} else {
								clearInterval(timer);
								that.orderData[index].info.btnTxt = '发送验证码';
								that.orderData[index].info.btnDisabled = false;
							}
						}, 1000);
					}
					if (res.code == 1001) {
						uni.showToast({
							title: res.cont,
							icon: 'none'
						});
					}
				});
		},

		reserveNow: function (index, orderId, form) {
			// 自定义表单提交
			let that = this;

			if (!this.vid) return (that.showModal = true);
			if (that.loadingNow) return; // 图片正在上传

			var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 手机号正则检验
			var phoneNumber = that.orderData[index].data[1].config_content; // 手机号
			if (!phoneReg.test(phoneNumber) && phoneNumber != '') {
				// that.orderData[index].info.wrongFlag = true;
				// that.orderData[index].info.wrongTxt = '手机号输入有误！';
				uni.showToast({
					title: '手机号输入有误！',
					icon: 'none'
				});
				return false;
			}
			var tokend = this.bid;
			var code = that.orderData[index].info.verCode;
			var params = {
				VeriCode: tokend,
				ordId: orderId,
				jsCode: this.vid,
				verification: code
			};
			if (form.sncode_id) params.sncodeId = form.sncode_id;
			let temp = that.orderData[index].data;
			for (var index1 = 0; index1 < temp.length; index1++) {
				var item = temp[index1];
				if (typeof item.config_content == 'object') {
					// 复选
					item.config_content = item.config_content.join(',');
				}
				if (item.config_type == 8 && item.imgs.length) {
					// 上传图片
					item.config_content = item.imgs.join(',');
				}
				if ((item.config_must == 1 || item.config_name == '用户姓名' || item.config_name == '联系电话') && item.config_content == '') {
					uni.showToast({
						title: item.config_name + '不能为空！',
						icon: 'none'
					});
					return false;
				}
				if (item.config_type == 16) {
					if (item.config_content < 1) return this.$Toast(item.config_name + '不能小于1');
					if (item.config_content > parseFloat(item.other)) return this.$Toast(item.config_name + '不能超过' + item.other);
					params.payNum = item.config_content;
				}
				var name = 'name' + index1;
				params[name] = item.config_content;
			}
			uni.showLoading({
				title: '请稍等 ~'
			});
			that.$http
				.post({
					url: '/zzj_singleSaleApi/addFrom',
					data: params
				})
				.then((res) => {
					if (res.code == 100) {
						// 提交成功
						if (form.sncode_id) that.$emit('cancel');
						that.sncode_id = res.sncode_id;
						that.jump_pay = res.jump_pay;
						that.orderData[index].data.forEach((item, index2) => {
							that.orderData[index].data[index2].config_content = '';
							that.orderData[index].data[index2].imgs = [];
							that.orderData[index].info.verCode = '';
							that.orderData[index].info.btnTxt = '发送验证码';
							that.orderData[index].info.btnDisabled = true;
						});
						clearInterval(timer);
						if (orderId == '2147') {
							// 申请站长成功
							that.showSuccess = true;
						} else {
							if (res.jump_pay == 0) {
								uni.hideLoading();
								that.modelTitle = res.data;
								that.btn1 = '确定';
								that.btn2 = '前往查看';
								that.success_img = res.success_img;
								if (!that.success_img) that.showModal1 = true;
							} else if (res.jump_pay == 1) {
								uni.hideLoading();
								window.open(res.jump_url);
							} else if (res.jump_pay == 2) {
								that.btn1 = '暂不支付';
								that.btn2 = '立即支付';
								that.getPlayinfo();
							}
						}
					}
					if (res.code == 101) {
						uni.showToast({
							title: res.data,
							icon: 'none'
						});
						// that.orderData[index].info.wrongTxt = res.data;
					}
				});
		},

		//  获取支付信息
		getPlayinfo() {
			let that = this;
			that.$http
				.post({
					url: '/accountPay/getSncodePay',
					data: {
						sncode_id: that.sncode_id
					}
				})
				.then((res) => {
					uni.hideLoading();
					if (res.code == '100') {
						that.palyInfo = res.data;
						that.showModal1 = true;
					} else {
						uni.showToast({
							title: res.msg,
							mask: true,
							icon: 'none'
						});
					}
				});
		},

		previewImage(i, imgArry) {
			let that = this;
			if (imgArry) {
				let arr = [];
				for (let i in imgArry) {
					arr.push(that.$imgUrls(imgArry[i]));
				}
				uni.previewImage({
					current: i,
					urls: arr,
					indicator: 'number',
					loop: true
				});
			}
		}
	},
	computed: {
		...mapState(['tabTitle', 'color', 'city', 'navHeight', 'System', 'vid', 'share', 'bid'])
	}
};
</script>
<style scoped lang="scss">
.nowBtn {
	height: 88rpx;
	border-radius: 44rpx;
	-webkit-border-radius: 44rpx;
	overflow: hidden;
}

.nowLeft {
	width: 270rpx;
}

.nowRigth {
	width: 360rpx;
}

.my-form {
	.orderInfo {
		background: white;

		.topMsg {
			padding: 0 30rpx;

			.infoContent {
				padding: 10upx 0 30upx;

				.infoName {
					font-size: 36upx;
					color: #333;
					font-weight: bold;
					line-height: 90upx;
					border-bottom: 1px solid #eeeeeeee;
				}

				.info_item {
					font-size: 24upx;
					margin: 10upx 0;
				}

				.info_s {
					margin: 20upx 0 10upx;
					padding-top: 10upx;
					border-top: 1px solid #eeeeee;
				}
			}
		}

		table {
			width: 100% !important;
		}
	}

	// 下载
	.dowload_file_box {
		padding: 20rpx 24rpx;

		.dowload_file {
			margin-right: 20rpx;

			text {
				display: inline-block;
				color: white;
				padding: 0 28rpx;
				line-height: 54rpx;
				text-decoration: underline;
				border-radius: 40rpx;
			}
		}
	}

	// 图集
	.photoes {
		overflow-x: auto;
		white-space: nowrap;
		margin-top: 20rpx;
		padding: 0 $uni-page-space;

		.img_1 {
			width: 100%;
			height: 300rpx;
			border-radius: 8rpx;
		}

		.img_2 {
			width: calc(25% - 8rpx);
			margin-right: 10rpx;
			height: calc(25vw - 10rpx);
			border-radius: 8rpx;
			display: inline-block;
		}
	}

	// 申请站长成功
	.success-img-box {
		min-height: 100vh;
		overflow-y: auto;
		background-color: #ffffff;

		.success-img {
			width: 100vw;
		}
	}

	/* 预约试听 */
	.reserve-box {
		padding: 30rpx;

		.reserve {
			border-radius: 16upx;
			padding: 30upx 30upx 20upx;
			box-sizing: border-box;
			background: white;
			box-shadow: 1px 1px 9px 0px rgba(0, 0, 0, 0.12);

			.reserve-title {
				color: #333333;
				font-size: 36rpx;
				position: relative;
				text-align: center;
			}

			.reserve-title:before {
				position: absolute;
				content: '';
				width: 40upx;
				height: 2px;
				top: calc(100% + 10px);
				left: 50%;
				transform: translateX(-50%);
				background: #333333;
			}

			.form {
				margin-top: 68upx;

				.Required {
					color: #fe1112 !important;
					font-size: 30upx;
					margin-right: 4upx;
					padding: 0;
					display: inline-block;
					vertical-align: middle;
					background: none;
				}

				.isKey {
					color: #000000;
				}

				> view {
					margin-bottom: 30rpx;
				}

				input {
					height: 100%;
					padding-left: 10upx;
					font-size: 26rpx;
					color: #333333;
				}

				.icon-xiasanjiaoxing {
					color: #999999;
					font-size: 28rpx;
				}

				// 1、单行文本框
				.text_input {
					background: #f2f2f2;
					border-radius: 10rpx;
					line-height: 88rpx;
					height: 88rpx;
					display: flex;
					padding: 0 20rpx;

					.form-ipt {
						border: none;
						outline: none;
						flex: 1;
						background: none;
						font-size: 24rpx;
					}

					.pla {
						color: #999999;
					}
				}

				// 3、验证码
				.Veri_Code {
					background: white;
					height: 88rpx;
					display: flex;

					.inputBox {
						background: #f2f2f2;
						border-radius: 10rpx;
						padding-left: 20rpx;
						align-items: center;
					}

					/* 发送验证码 */
					.sendCode {
						margin-left: 20rpx;
						border-radius: 10rpx;
						outline: none;
						box-sizing: border-box;
						color: white;
						line-height: 88rpx;
						font-size: 28rpx;
						width: 250rpx;
					}
				}

				// 2、选择日期  4、选择时间  5、选择地址 6、下拉框 11、选择时间 (可配置类型)
				.drop_select {
					border: 1px solid #d8d8d8;
					height: 88rpx;
					display: flex;
					border-radius: 10rpx;

					.picker {
						width: 100%;
						height: 88rpx;
						display: flex;
						align-items: center;
						padding: 0 20rpx;

						.flex {
							color: #999999;
						}

						.isKey {
							color: #000000;
						}
					}
				}

				// 7、复选框
				.mulitSelect {
					display: flex;

					.checkList {
						display: flex;
						flex-wrap: wrap;
						margin-bottom: -14rpx;

						.checkItem {
							margin-right: 20rpx;
							margin-bottom: 14rpx;
							display: flex;
							align-items: center;

							.checkIcon {
								border-radius: 6rpx;
								width: 30rpx;
								height: 30rpx;
								display: flex;
								align-items: center;

								.icon-xuanzhong {
									font-size: 26rpx;
								}
							}

							.name {
								color: #666666;
								margin-left: 8rpx;
							}
						}
					}
				}

				// 8、单选框
				.singleSelect {
					display: flex;

					.checkList {
						display: flex;
						flex-wrap: wrap;
						margin-bottom: -14rpx;

						.checkItem {
							margin-right: 20rpx;
							margin-bottom: 14rpx;
							display: flex;
							align-items: center;

							.checkIcon_ {
								border-radius: 50%;
								width: 32upx;
								height: 32upx;
								display: inline-block;
								box-sizing: border-box;
								border: 1px solid #d8d8d8;
								position: relative;

								text {
									width: 16upx;
									height: 16upx;
									border-radius: 50%;
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);
								}

								.grayBg {
									background: #d8d8d8;
								}
							}

							.name {
								color: #666666;
								margin-left: 6rpx;
							}
						}
					}
				}

				// 9、上传图片
				.uploadImg {
					.phone-box {
						flex-wrap: wrap;
						margin-top: 20rpx;
						margin-bottom: -20rpx;

						.upBox {
							width: 196upx;
							height: 196upx;
							border-radius: 10rpx;
							position: relative;

							&:nth-of-type(3n-1) {
								margin: 0 20rpx;
							}

							margin-bottom: 20rpx;

							.upIcon {
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
							}

							.delImg {
								position: absolute;
								z-index: 22;
								width: 32rpx;
								height: 32rpx;
								top: -16rpx;
								right: -16rpx;
								border-radius: 50%;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}

				// 10、文本域
				.areaBox {
					.textArea {
						background-color: #f5f5f5;
						padding: 20rpx;
						font-size: 24rpx;
						height: 196rpx;
						z-index: 0 !important;
						color: rgb(51, 51, 51);
						border-radius: 10rpx;
						margin-top: 10rpx;
					}
				}

				.wrong {
					color: #fe1112;
					padding-left: 16rpx;
					line-height: 40upx;
					margin-bottom: 20upx;
				}

				/* 立即预约 */
				.reserveNow {
					font-size: 32upx;
					color: white;
					height: 88upx;
					line-height: 88upx;
					border-radius: 44upx;
					border: none;
					outline: none;
					position: relative;
					background-color: #d8d8d8;
				}
			}
		}
	}
}
</style>
